<template>
    <!-- 设备异常上报 -->
     <el-container class="container">
        <!-- 头部导航 -->
        <el-header class="header">
            <el-header class="headerSon">
                <div>
                    <el-icon><Fold /></el-icon>
                    <span>异常管理</span>
                </div>
                <div>
                    <img :src="userPhoto" alt="">
                    <span>{{ userName }}</span>
                </div>
            </el-header>
        </el-header>
        <!-- 底部内容 -->
        <el-container class="content">
            <el-header>
                <!-- 搜索 -->
                <div>
                    <el-input
                        placeholder="设备编号"
                        v-model="code"
                        style="width:185px;height: 25px;margin-right: 10px;"
                    ></el-input>
                    <el-input
                        placeholder="设备地点"
                        v-model="address"
                        style="width:185px;height: 25px;margin-right: 10px;"
                    ></el-input>
                    <el-select placeholder="选择设备异常类型" v-model="DeviceType">
                        <el-option
                            v-for="(item,index) in abnormalTips"
                            :key="index"
                            :value="item"
                            :label="item"
                        ></el-option>
                    </el-select>
                    <el-select placeholder="选择工单状态" v-model="ListState">
                        <el-option
                            v-for="item in StateArr"
                            :key="item.value"
                            :value="item.value"
                            :label="item.label"
                        ></el-option>
                    </el-select>
                    <el-button type="primary" @click="goSearch">搜索</el-button>
                </div>
                <!-- 刷新/添加按钮 -->
                <div class="info">
                    <el-button type="danger" @click="goAdd"><el-icon><Plus /></el-icon>添加</el-button>
                    <el-button type="info"  @click="goInfo"><el-icon><Refresh /></el-icon>刷新</el-button>
                </div>
            </el-header>
            <el-footer>
                <el-table :data="ReportList" border style="width: 100%" >
                    <el-table-column label="工单号" prop="gdId"></el-table-column>
                    <el-table-column label="设备编号" prop="code"></el-table-column>
                    <el-table-column label="设备小区" prop="address"></el-table-column>
                    <el-table-column label="异常类型" prop="abnormalType"></el-table-column>
                    <el-table-column label="异常描述" prop="abnormalDescription"></el-table-column>
                    <el-table-column label="上报人信息" prop="reportUsername"></el-table-column>
                    <el-table-column label="上报时间" prop="reportTime"></el-table-column>
                    <el-table-column label="维修人" prop="handlerUsername"></el-table-column>
                    <el-table-column label="维修时间" prop="handleTime"></el-table-column>
                    <el-table-column label="工单状态" prop="handleStatus">
                        <template #default="scope">
                            <span :style="{color:scope.row.handleStatus == 0 ? 'red' : (scope.row.handleStatus == 1 ? 'green' : 'orange')}">
                                {{ scope.row.handleStatus == 0 ? '未处理' : (scope.row.handleStatus == 1 ? '处理中' : '已解决') }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template #default="scope">
                            <el-button @click="goDetails(scope.row,'详情')">详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页器 -->
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[15]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    class="pagination"
                    background 
                />
            </el-footer>
        </el-container>
        <!-- 模态框 -->
        <el-dialog v-model="Dialog" :modal="true">
            <template #header>
                <span>{{ flag == true ? '新增' : '详情' }}</span>
            </template>
            <el-container>
                <!-- 详情 -->
                <div class="box" v-if="flag == false && abnormalListDetails">
                    <el-row style="padding-left:2em;">
                        <el-form-item label="工单号">
                            <el-input disabled v-model="abnormalListDetails.gdId"></el-input>
                        </el-form-item>
                    </el-row>
                    <el-row style="padding-left: 1em;">
                        <el-form-item label="设备编号">
                            <el-input disabled v-model="abnormalListDetails.code"></el-input>
                        </el-form-item>
                        <el-form-item label="设备小区">
                            <el-input disabled v-model="abnormalListDetails.address"></el-input>
                        </el-form-item>
                    </el-row>
                    <el-row style="padding-left:1em;">
                        <el-form-item label="异常类型">
                            <el-input disabled v-model="abnormalListDetails.abnormalType"></el-input>
                        </el-form-item>
                    </el-row>
                    <el-row style="padding-left: 1em;">
                        <el-form-item label="异常描述" style="width:100%;">
                            <el-input type="textarea" disabled v-model="abnormalListDetails.abnormalDescription"></el-input>
                        </el-form-item>
                    </el-row>
                    <el-row>
                        <el-form-item label="上报人信息">
                            <el-input disabled v-model="abnormalListDetails.reportUsername"></el-input>
                        </el-form-item>
                        <el-form-item label="上报时间">
                            <el-input disabled v-model="abnormalListDetails.reportTime"></el-input>
                        </el-form-item>
                    </el-row>
                    <el-row style="padding-left: 1em;">
                        <el-form-item label="处理结果" style="width:100%;">
                            <el-input type="textarea" disabled v-model="abnormalListDetails.result"></el-input>
                        </el-form-item>
                    </el-row>
                    <el-row style="padding-left: 3em;">
                        <el-form-item label="物料">
                            <el-input disabled v-model="abnormalListDetails.material"></el-input>
                        </el-form-item>
                    </el-row>
                    <el-row style="padding-left: 3em;">
                        <el-form-item label="状态">
                            <el-input disabled :placeholder="abnormalListDetails.handleStatus == 0 ? '未处理' : (abnormalListDetails.handleStatus == 1 ? '处理中' : '已解决')"></el-input>
                        </el-form-item>
                    </el-row>
                    <el-row style="padding-left: 2em;">
                        <el-form-item label="维修人">
                            <el-input disabled v-model="abnormalListDetails.handlerUsername"></el-input>
                        </el-form-item>
                        <el-form-item label="维修时间">
                            <el-input disabled v-model="abnormalListDetails.handleTime"></el-input>
                        </el-form-item>
                    </el-row>
                    <div class="close">
                        <el-button @click="Dialog = false">关闭</el-button>
                    </div>
                </div>
                <!-- 添加 -->
                <div class="box" v-else>
                    <el-form :model="addArr" ref="myForm" :rules="rules">
                        <el-form-item label="异常设备" prop="abnormalDevice" style="width:100%;">
                            <el-select placeholder="请选择" style="width:42%;" v-model="addArr.abnormalDevice">
                                <el-option
                                    v-for="item in AddAbnormalDevice"
                                    :key="item.id"
                                    :value="item.id"
                                    :label="item.code"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="异常类型" style="width:100%;" prop="abnormalType" class="asd">
                            <el-select v-model="addArr.abnormalType" style="width:42%;">
                                <el-option
                                    v-for="(item,index) in abnormalTips"
                                    :key="index"
                                    :value="item"
                                    :label="item"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="异常描述" style="width:99%;" prop="abnormalDescribe"class="asd">
                            <el-input type="textarea" v-model="addArr.abnormalDescribe"></el-input>
                        </el-form-item>
                        <el-form-item id="close">
                            <el-button @click="Dialog = false">取消</el-button>
                            <el-button @click="sureAdd(myForm)" type="primary">确定</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-container>
        </el-dialog>
     </el-container>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue';
import { 
    getAbnormalTips,
    getAbnormalListDetails,
    getAbnormalList,
    addAbnormalListNews,
} from '@/components/AbnormalMange/AbnormalMange';
import { ElMessage } from 'element-plus';
onMounted(() => {
    //页面已加载就调数据异常工单的接口
    getAbnormalTipsFun()
})
let userPhoto = ref("")//用户头像
let userName = ref("用户")//用户名/手机号
const currentPage = ref(1)//页码
const pageSize = ref(15)//页号
const total = ref(null)//总数
let address = ref("")//设备地点
let abnormalType = ref("")//异常类型
let code = ref("")//设备编号
let handleStatus = ref('')//工单状态
let abnormalListDetails = ref(null)//异常工单详情
let DeviceType = ref("")//设备异常类型
let ListState = ref("")//设备工单状态
let StateArr = ref([
    {value:0,label:'未处理'},
    {value:1,label:'处理中'},
    {value:2,label:'已解决'},
])
let ReportList = ref([])//数据异常工单的Table里面的数据
let abnormalTips = ref([])//异常类型
let getAbnormalTipsData = ref({
    pageIndex:currentPage.value,
    pageSize:pageSize.value,
    address:address.value,
    abnormalType:abnormalType.value,
    code:code.value
})
let getAbnormalTipsFun = async () => {//获取异常工单列表
    try{
        const res = await getAbnormalTips(getAbnormalTipsData.value)
        if(res.code == 200){ 
            ReportList.value = res.dataset.dataset.List
            abnormalTips.value = Array.from(new Set(res.dataset.dataset.List.map(item => item.abnormalType))).filter(item => item != '')
            total.value = res.dataset.dataset.totalSize
        }
    }catch(error){
        ReportList.value = []; // 清空列表
        total.value = 0;
    }
}
let Dialog = ref(false)//模态框的开关
let flag = ref(false)//判断点击的是添加还是详情
let goAdd = () => {//点击添加
    Dialog.value = true
    flag.value = true
    //获取异常设备
    getAbnormalListFun()
}
let myForm = ref("")
let addArr = ref({//添加时的三个数据
    abnormalDevice:"",//异常设备
    abnormalType:"",//异常类型
    abnormalDescribe:""//异常描述
})
const rules = reactive({//表填提交的规则
    abnormalDevice:[{required:true,message:"请选择异常设备",trigger:"change"}],
    abnormalType:[{required:true,message:"请选择异常类型",trigger:"change"}],
    abnormalDescribe:[{required:true,message:"请填写异常描述",trigger:"blur"}]
})
let sureAdd = async(formEl) => {//点击确定添加
    await formEl.validate(async valid => {
        if(valid){
            Dialog.value = false
            //调添加接口
            let addAbnormalListNewsData = {
                equipmentId:addArr.value.abnormalDevice,
                abnormalType:addArr.value.abnormalType,
                abnormalDescription:addArr.value.abnormalDescribe
            }
            try{
                const res = await addAbnormalListNews(addAbnormalListNewsData)
                if(res.code == 200){
                    ElMessage.success(res.dataset.dataset)
                    getAbnormalTipsFun()
                }
            }catch(error){
                console.log(error);
            }
        }
    }) 
}
let AddAbnormalDevice = ref([])//添加里面选择的异常设备
//调取异常上报接口，获取异常的设备
let getAbnormalListFun = async () => {
    let data = {
        pageIndex:1,
        pageSize:1000
    }
    try{
        const res = await getAbnormalList(data)
        if(res.code == 200){
            // 第一步：提取id和code的键值对
            const deviceList = res.dataset.dataset.List.map(item => ({
                id: item.id,    // 对应ElOption的value
                code: item.code // 对应ElOption的label
            }));
            // 第二步：根据id去重，避免重复设备
            const uniqueDeviceList = Array.from(new Map(deviceList.map(item => [item.id, item])).values());
            AddAbnormalDevice.value = uniqueDeviceList; // 赋值给下拉框数据源
        }
    }catch(error){
        AddAbnormalDevice.value = []
    }
}
let goInfo = () => {//点击刷新
    location.reload()
}
let goDetails = async (row,v) => {//点击去详情,row---本行数据,v---详情
    Dialog.value = true
    flag.value = false
    let abnormalListDetailsData = {
        pageIndex:1,
        pageSize:1000,
        id:row.id
    }
    try{
        const res = await getAbnormalListDetails(abnormalListDetailsData)
        if(res.code == 200){
            abnormalListDetails.value = res.dataset.dataset[0]
        }
    }catch(error){
        console.log(error);
    }
}
//分页器
const size = ref('default')
const disabled = ref(false)
const handleSizeChange = (val) => {
  pageSize.value = val; 
  getAbnormalTipsData.value.pageSize = val
  getAbnormalTipsFun(getAbnormalTipsData.value)
}
const handleCurrentChange = (val) => {
  currentPage.value = val;
    getAbnormalTipsData.value.pageIndex = val
  getAbnormalTipsFun(getAbnormalTipsData.value)
}

//点击搜索
let goSearch = () => {
    getAbnormalTipsData.value.handleStatus = ListState.value
    if(getAbnormalTipsData.value.handleStatus == ''){
        delete getAbnormalTipsData.value.handleStatus
    }
    getAbnormalTipsData.value = {
        pageIndex: currentPage.value,
        pageSize: pageSize.value,
        code: code.value,         
        address: address.value,   
        abnormalType: DeviceType.value, 
    };
    getAbnormalTipsFun()
}

</script>

<style lang="less" scoped>
.container{
    width:100%;
    height:100%;
    .header{
        background: #fff;
        height:80px;
        padding: 0;
        border-bottom: 1px solid  #ccc;
        box-shadow: 0px 1px 2px 0px #ccc;
        .headerSon{
            height:45px;
            display: flex;
            align-items: center;
            border-bottom: 1px solid #ccc;
            justify-content: space-between;
            div{
                display: flex;
                align-items: center;
                span{
                    display: inline-block;
                    padding:0px 10px;
                    font-size:13px;
                }
            }
        }
    }
    .content{
        width:100%;
        box-sizing: border-box;
        padding:20px;
        .el-header{
            width:100%;
            --el-header-padding: 0;
            :deep(.el-input__inner){
                font-size:12px;
            }
            .el-select{
                width:185px;
                margin-right:25px;
                :deep(.el-select__wrapper){
                    min-height: 25px;
                    span{
                        font-size:12px;
                    }
                    .el-select__placeholder{
                        transform: translateY(-53%);
                    }
                }
            }
            .el-button {
                height: 25px;
                font-size:12px;
                padding: 4px 10px;
            }
            .info{
                margin-top:10px;
                display: flex;
                justify-content: end;
                .el-button{
                    width:60px;
                }
            }
        }
        .el-footer {
            --el-footer-padding: 0;
            margin-top:5px;
            .el-table{
                :deep(.cell){
                    font-size:12px;
                    padding: 0 6px;
                }
                .el-button{
                    height: 23px;
                    font-size: 12px;
                    padding: 2px 10px;
                }
                :deep(.el-table__cell) {
                    padding: 3px 0;
                }
            }
        }
    }
}
:deep(.el-dialog__header){
    display: inline-block;
}
:deep(.el-dialog){
    color:#363638;
    border-radius:2px;
    --el-dialog-margin-top:10vh;
    min-width:800px;
    top:10%;
    .el-container{
        width:100%;
        font-size:12px;
        .box{
            width:100%;
            .el-row{
                width:100%;
                .el-form-item{
                    width:50%;
                    .el-form-item__label{
                        font-weight: 600;
                    }
                    .el-input__wrapper{
                        height:25px;
                        .el-input__inner{
                            font-size:12px;
                        }
                    }
                    .el-select__wrapper {
                        min-height: 25px;
                        width:69%;
                    }
                    .el-select__wrapper:nth-child(2){
                        width:68%;
                    }
                    .el-input{
                        width:70%;
                    }
                    .el-textarea__inner{
                        width:100%;
                    }
                }
            }
            #close{
                width:100%;
                display: flex;
                box-sizing: border-box;
                padding-left: 295px;
                .el-button{
                    padding: 2px 10px;
                    font-size:14px;
                    width:60px;
                    height:35px;
                }
            }
            .close{
                width:100%;
                display: flex;
                justify-content:end;
                .el-button{
                    padding: 2px 10px;
                    font-size:14px;
                    width:60px;
                    height:35px;
                }
            }
        }
    }
    .box{
        box-sizing: border-box;
        padding: 0 20px;
        .el-form{
            width:100%;
            .el-form-item{
                width:50%;
                .el-form-item__label{
                    font-size:13px;
                }
                .el-select__wrapper{
                    min-height: 25px;
                }
                .el-select {
                    width:90%
                }
                .el-form-item__content{
                    width:90%
                }
            }
        }
    }
}
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
.el-pagination {
    margin-top:5px;
    justify-content: end;
    box-sizing: border-box;
    padding-right:20px;
    font-size: 12px;
    --el-pagination-font-size: 12px;
    --el-pagination-button-width: 28px;
    --el-pagination-button-height: 28px;
    :deep(.el-select__wrapper){
        font-size: 12px;
        min-height: 25px;
    }
    :deep(.el-input__wrapper){
        height: 25px;
        font-size: 12px;
    }
}

</style>